<template>
  <!-- 打开弹框的动画 -->
  <transition name="animation">
    <div class="loadindWrap"
         v-if="showLoading"
         :style="{background:backgroundColor}">
      <div class="loadingContent">
        <div style="--i:0"></div>
        <div style="--i:1"></div>
        <div style="--i:2"></div>
        <div style="--i:3"></div>
        <div style="--i:4"></div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      showLoading: false, // 控制显示与隐藏的标识
      backgroundColor: "rgba(0, 0, 0, 0.5)", // 默认背景色
      text: "加载中...", // 默认文字
    };
  }
}
</script>

<style lang="less" scoped>
.loadindWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .loadingContent {
    position: relative;
    color: #fff;
    text-align: center;
    div {
      position: absolute;
      left: calc(var(--i) * 20px);
      width: 20px;
      height: 20px;
      background-color: #409EFF;
      border: 1px solid;
      animation: move 3s linear infinite;
      animation-delay: calc(var(--i) * -600ms);
    }
  }
}
// 加一个过渡效果
.animation-enter,
.animation-leave-to {
  opacity: 0;
}
.animation-enter-active,
.animation-leave-active {
  transition: opacity 0.6s;
}
@keyframes move {
  0% {
    left: 100px;
    top: 0;
  }
  80% {
    left: 0;
    top: 0;
  }
  85% {
    left: 0;
    top: -20px;
    width: 20px;
    height: 20px;
  }
  88% {
    left: 0;
    top: -20px;
  }
  90% {
    width: 60px;
    height: 15px;
  }
  95% {
    left: 100px;
    top: -20px;
    width: 20px;
    height: 20px;
  }
  98% {
    left: 100px;
    top: -20px;
  }
  100% {
    left: 100px;
    top: 0;
  }
}
</style>